<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>

</head>
<body class="gray-bg">
<div class="middle-box text-center animated fadeInDown">
    这是一个纯前端界面
    <button onclick="onClick()">按钮</button>
    <button onclick="onMybatisClick()">按钮</button>
    <div class="table-div">
        <table>
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
                <th>height</th>
                <th>weight</th>
            </tr>

            </thead>
            <tbody id="table-data">
            <tr>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
                <td>sssss</td>
            </tr>

            </tbody>
        </table>
    </div>

    <div>
        <span th:value="${person}"></span>
        <span th:value="${personMybatis}"></span>
    </div>
    <div id="show" class="show-class">

    </div>
</div>
<script th:src="@{/jquery.min.js}"></script>
<script>
    function onClick() {
        console.log("模拟发请求");
        $.get("/test/getTest", {id: "1", name: "张三"}, response => {
            console.log(response);
            let id = response.id;
            let name = response.name;
            let age = response.age;
            let gender = response.gender;
            let element = $("#show");
            console.log(element);
            element.append("<div>\n" +
                "            <span>id:</span><span>" + id + "</span> \n" +
                "        </div>\n" +
                "        <div>\n" +
                "            <span>name:</span><span>" + name + "</span> \n" +
                "        </div>\n" +
                "        <div>\n" +
                "            <span>age:</span><span>" + age + "</span> \n" +
                "        </div>\n" +
                "        <div>\n" +
                "            <span>gender:</span><span>" + gender + "</span> \n" +
                "        </div>")
        })
    }

    function onMybatisClick() {
        $.get("/test/getFromMysqlByMyBatis", response => {
            response.forEach(person => {
                let name = person.name;
                if (name === "Maria Kelly") {
                    console.log("找到了" + name);
                }
            })
        })
    }
</script>
</body>
</html>
